<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/js动画.css">
</head>
<body>
    <!-- 1 -->
     <div class="slider">
       <div class="slides">
           <div class="slide" style="background-image: url(../涂鸦示例图片/58afaabbf5643ecc6bf78885fc5d6cdb_2368762650130760285.png);"></div>
           <div class="slide" style="background-image: url(../涂鸦示例图片/c61f9895d2fa4f68b36392488b5876d4_tplv-p14lwwcsbr-7.png );"></div>
            <div class="slide" style="background-image: url(../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg);"></div>

       </div>
   </div>
    <!-- 2 -->
   <div class="b3 fl">
    <div class="b2">
        <div class="b1"><img src="../涂鸦示例图片/漂亮的芙.jpg" alt=""></div>
        <div class="b1"><img src="../涂鸦示例图片/794d462ae74fc50d13700c8e73c8cc6c_5532499941586726110.jpg" alt=""></div>
        <div class="b1"><img src="../涂鸦示例图片/1fbe7e8e869ff71aebc43ceff29dba7a_1158704751489981103.jpg" alt=""></div>

    </div>
   </div>
    <!-- 3 -->
    <div class="l-1 fl">
       <div class="l-1-1">
          <div class="l1"><img src="../涂鸦示例图片/c61f9895d2fa4f68b36392488b5876d4_tplv-p14lwwcsbr-7.png" alt=""></div> 
          <div class="l1"><img src="../涂鸦示例图片/镜流.jpg" alt=""></div> 
          <div class="l1"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div> 
       </div>
    </div>
    <!-- 4 -->
    <div class="l-2 fl">
        <div class="l-2-1">
           <div class="l2"><img src="../涂鸦示例图片/c61f9895d2fa4f68b36392488b5876d4_tplv-p14lwwcsbr-7.png" alt=""></div> 
           <div class="l2"><img src="../涂鸦示例图片/镜流.jpg" alt=""></div> 
           <div class="l2"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div> 
        </div>
     </div>
      <!-- 5 -->
      <div class="sDst" style="transform-style:preserve-3d ;">
       <div class="box1 fl d-1">
        <div class="b-1 k">
            <div class="op k2"><img src="../涂鸦示例图片/镜流.jpg" alt=""></div> 
            <div class="op k2"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div> 
            <div class="op k2"><img src="../涂鸦示例图片/c61f9895d2fa4f68b36392488b5876d4_tplv-p14lwwcsbr-7.png" alt=""></div> 
        </div>
       </div>
<div class="box1 fl d-2">
        <div class="b-1 v2 k">
            <div class="op v2-1"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div> 
            <div class="op v2-1"><img src="../涂鸦示例图片/c61f9895d2fa4f68b36392488b5876d4_tplv-p14lwwcsbr-7.png" alt=""></div> 
            <div class="op v2-1"><img src="../涂鸦示例图片/镜流.jpg" alt=""></div> 
        </div>
    </div>
<!-- 。。。-->
<div class="box1 fl d-3">
    <div class="b-1 v3">
        <div class="op v3-1"><img src="../涂鸦示例图片/镜流.jpg" alt=""></div> 
        <div class="op v3-1"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div> 
        <div class="op v3-1"><img src="../涂鸦示例图片/c61f9895d2fa4f68b36392488b5876d4_tplv-p14lwwcsbr-7.png" alt=""></div> 
    </div>
  </div>
<!--。。。。-->
<div class="box1 fl d-4">
    <div class="b-1 v4">
        <div class="op v4-1"><img src="../涂鸦示例图片/c61f9895d2fa4f68b36392488b5876d4_tplv-p14lwwcsbr-7.png" alt=""></div> 
        <div class="op v4-1"><img src="../涂鸦示例图片/镜流.jpg" alt=""></div> 
        <div class="op v4-1"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div> 
    </div>
  </div>
<!-- 。。。。。-->
<div class="box1 fl d-5">
    <div class="b-1 v5">
        <div class="op v5-1"><img src="../涂鸦示例图片/镜流.jpg" alt=""></div> 
        <div class="op v5-1" ><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div> 
        <div class="op v5-1"><img src="../涂鸦示例图片/c61f9895d2fa4f68b36392488b5876d4_tplv-p14lwwcsbr-7.png" alt=""></div> 
    </div>
  </div>
<!-- 。。。。。。-->
<div class="box1 fl d-6">
    <div class="b-1 v6">
        <div class="op v6-1"><img src="../涂鸦示例图片/镜流.jpg" alt=""></div> 
        <div class="op v6-1"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div> 
        <div class="op v6-1"><img src="../涂鸦示例图片/c61f9895d2fa4f68b36392488b5876d4_tplv-p14lwwcsbr-7.png" alt=""></div> 
    </div>
  </div>



        </div>
<!-- 6 -->
        <div class="box2">
            <div class="a-1">
                <div class="a-2 g"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div>
                <div class="a-2 g1"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div>
                <div class="a-2 g2"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div>
                <div class="a-2 g3"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div>
                <div class="a-2 g4"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div>
                <div class="a-2 g5"><img src="../涂鸦示例图片/2ddb27376f0e7fee7fe2b166f9bebed.jpg" alt=""></div>
            </div>
        </div>
















    <!-- ...... -->
    <!-- ...... -->
    <!-- 该div用于底部留白 -->
    <div class="lb fl"></div>
   <script>
    // 1
       let index = 0;
       const slides = document.querySelector('.slides');
       const slide = document.querySelector('.slide');

       function nextSlide() {
           slides.style.transform = `translateX(-${index * 100}%)`;
           index++;
           if (index >= 3) {
               index = 0;
           }
       }

       setInterval(nextSlide, 2000);
    // 2
       let b = 0;
       const b2 = document.querySelector('.b2');
       const b1 = document.querySelector('.b1');

       function nextSlid() {
           b2.style.transform = `translateX(-${b * 5}%)`;
           b++;
           if (b >= 44) {
               b = 0;
           }
       }

       setInterval(nextSlid, 100);
    //   3
       let m=0;
       var l1=document.querySelector('.l-1-1');
       var l2=document.querySelector(".l1")

       function wuhu(){
        l1.style.transform = `translateY(-${m*33.3}%)`;
        m++;
        if(m>=3){
          m=0;
        }
       }
       setInterval(wuhu,2000);
    // 4
    let c=0;
       var l3=document.querySelector('.l-2-1');
       var l4=document.querySelector(".l2");

       function wuh(){
        l3.style.transform = `translateX(${m*100}%)`;
        c++;
        if(c>=3){
          c=0;
        }
       }
       setInterval(wuh,2000);
      
       let d=0;
       var x=document.querySelector(".k");
       var y=document.querySelector(".k2")
       function backli(){
        x.style.transform = `translateY(-${d*33.3}%)`;
        d++;
        if(d>=3){
            d=0
        }
       }
       setInterval(backli,2000);
// v2
       let v=0;
       var v2=document.querySelector(".v2");
       var v21=document.querySelector(".v2-1")
       function vv(){
        v2.style.transform = `translateY(-${v*33.3}%)`;
        v++;
        if(v>=3){
            v=0
        }
       }
       setInterval(vv,2000);
// v3
let r=0;
       var v3=document.querySelector(".v3");
       var v31=document.querySelector(".v3-1")
       function vvv(){
        v3.style.transform = `translateY(-${r*33.3}%)`;
        r++;
        if(r>=3){
            r=0
        }
       }
       setInterval(vvv,2000);
// v4
let q=0;
       var v4=document.querySelector(".v4");
       var v41=document.querySelector(".v4-1")
       function vvvv(){
        v4.style.transform = `translateY(-${q*33.3}%)`;
        q++;
        if(q>=3){
            q=0
        }
       }
       setInterval(vvvv,2000);
// v5
let p=0;
       var v5=document.querySelector(".v5");
       var v51=document.querySelector(".v5-1")
       function vvvvv(){
        v5.style.transform = `translateY(-${p*33.3}%)`;
        p++;
        if(p>=3){
            p=0
        }
       }
       setInterval(vvvvv,2000);
// v6
let t=0;
       var v6=document.querySelector(".v6");
       var v61=document.querySelector(".v6-1")
       function vvvvvv(){
        v6.style.transform = `translateY(-${t*33.3}%)`;
        t++;
        if(t>=3){
            t=0
        }
       }
       setInterval(vvvvvv,2000);
    //    6
    let s=0;
    var san=document.querySelector('.a-1');
    var sa=document.querySelector('.a-2');
    function san1(){
        san.style.transform = `translateX(-${s*350}px)`;
        s++;
        if(s>=5){
            s=0
        }
         
    }
    setInterval(san1,2000);
    
    let arr = [g, g1, g2, g3, g4, g5];

    if (s === 2) {
        document.querySelectorAll(`.a-${arr[0]} > *`)[1].classList.add('.a-3');
    }

   </script>
</body>
</html>